<template>
  <div>
    <page-main>
      <el-table :data="tableData" border style="width: 100%;" height="50vh" v-loading="loading">
        <el-table-column prop="user_name" label="人员名称" width="180">
        </el-table-column>
        <el-table-column prop="wb_unit_name" label="技术服务机构">
        </el-table-column>
        <el-table-column prop="unit_name" label="社会单位"> </el-table-column>
        <el-table-column prop="image" label="原有人脸图片">
          <template #default="scope">
            <el-image
              style="width: 60px; height: 60px;"
              :src="upDataUrl + scope.row.image"
              class="checkImg"
              :preview-src-list="[upDataUrl + scope.row.image]"
            ></el-image>
          </template>
        </el-table-column>
        <el-table-column prop="selfie" label="不符人脸图片">
          <template #default="scope">
            <el-image
              style="width: 60px; height: 60px;"
              :src="upDataUrl + scope.row.selfie"
              class="checkImg"
              :preview-src-list="[upDataUrl + scope.row.selfie]"
            ></el-image>
          </template>
        </el-table-column>
        <el-table-column prop="createtime" label="维保时间">
            <template #default="scope">
                <div>{{$getDateTime(scope.row.createtime)}}</div>
            </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          @current-change="getDateList"
          v-model:currentPage="tableDataInfo.current_page"
          :total="tableDataInfo.total"
          :page-count="tableDataInfo.last_page"
          background
          layout="total,prev, pager, next, jumper"
        >
        </el-pagination>
      </div>
    </page-main>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      tableDataInfo: "",
      upDataUrl: import.meta.env.DEV
        ? "/proxy/"
        : import.meta.env.VITE_APP_API_BASEURL,
        loading:false
    };
  },
  created() {
    this.getDateList();
  },
  methods: {
    getDateList(page) {
        this.loading=true
      let pageNum = 1;
      if (page) pageNum = page;
      this.$api
        .post("/unit/Dashboard/noSelfLocation", { rows: 20, page: pageNum })
        .then((res) => {
          this.tableData = res.data.data;
          delete res.data.data;
          this.tableDataInfo = res.data;
        }).finally(()=>{
            this.loading=false
        })
    },
  },
};
</script>

<style scoped>
.block {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}
</style>
